<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--页面中一定要引入internal.js为了能直接使用当前打开dialog的实例变量-->
<style>
.btnContainer{
	display:inline-block;
}

#attrTable .notView{
	display:none;
}

#attrTable .inputing:before{
	content:':  ';
}


#attrTable td{
    padding-left:10px;
	padding-top:10px;
}


/*#attrTable tr:first-child*/
#attrTable td
{
	text-align:justify;

}

#buttons{
float:left;
border-right:2px solid gray;
height:380px;
margin-right:30px;
overflow:auto;
}

.btn_container{
	padding:10px;
	padding-left:15px;
	padding-right:15px;
}

.selected{
	background:lightcyan;
	border:2px solid aqua;
}
</style>
<script type="text/javascript" src="../dialogs/internal.js"></script>
<script type="text/javascript" src="btnConfig.js"></script>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../webjar/bootstrap/3.3.7-1/css/bootstrap.min.css">
</head>
<body>
<div id="buttons">

	<div  class='btn_container'>
	<button data-type='sign' class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span>&nbsp;签名</button>
	</div>

	<div class="btn_container">
		<button data-type="opera" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-flash"></span>&nbsp;操作</button>
	</div>

	<div  class='btn_container'>
	<button data-type='test' class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-warning-sign"></span>&nbsp;测试</button>
	</div>

</div>
<form name='btnAttrs'>
<table id='attrTable'>
<tbody>
</tbody>
<!--<tr><td>类型</td><td class='inputing'><input name='bctype' type='text' /></td></tr>
<tr><td>签名组</td><td class='inputing'><input name='bcsgrp' type='text' /></td></tr>
<tr><td>bctag: </td><td><input name='bctag' type='text' /></td></tr>
<tr><td>签名id</td><td class='inputing'><input name='bcsignid' type='text' /></td></tr>
<tr class='notView'><td>onClick: </td><td><input name='onClick' type='hidden' value='confirmSection(this)' /></td></tr>
<tr class='notView'><td>class: </td><td><input name='class' type='hidden' value='btn btn-primary btn-xs'/></td></tr>-->
</table>
</form>
<!--文本: --> <input id='innerText' type='hidden' value='签名'/>
</body>
<script>
	var title=document.getElementById('innerText');
	//鼠标经过样式
	$('.btn_container').mouseover(function(e){
		this.style.background='lightcyan'
	});

	//鼠标移开还原
	$('.btn_container').mouseout(function(e){
		this.style.background=''
	});

	//鼠标点击事件
	$('.btn_container').click(function(e){
		//标记选中元素
		$('.selected').removeClass('selected');
		$(this).addClass('selected');

		var btnMeta=Buttons[$(this).find('button').data('type')];
		var rowTemplate='<tr><td>$label</td><td class="inputing">$widget</td></tr>';
		var inputTemplate={
			'text':'<input name="$label" value="$default"/>',
			'select':'<select name="$name" value="$default">$child</select>',
			'option':'<option value="$value">$label</option>'
			};
		var hiddenTemplate='<input type="hidden" name="$label" value="$value" />';
		$('form tr').remove();
		$('form input').remove();

		//定义编辑按钮界面输入工具类型
		//text: <input>, select: <select>
		var categoryBuilder={
			'text':function(key,obj){
				return inputTemplate['text'].replace('$label',obj['attrName']).replace('$default',(typeof obj['defaultValue'])=='undefined'?'':obj['defaultValue']);
			},
			'select':function(key,obj){
				$select=inputTemplate['select'].replace('$name',obj['attrName']);
				var options=obj['group']();
				var optionstr='';
				for (var k in options){
					optionstr+=inputTemplate['option'].replace('$value',options[k]).replace('$label',k);
				}
				return $select.replace('$child',optionstr);
			}
		}
		for (var key in btnMeta.input){
			var widgetCode=rowTemplate.replace('$label',key);
			widgetCode=widgetCode.replace('$widget',categoryBuilder[btnMeta.input[key]['category']](key,btnMeta.input[key]));
			$('#attrTable tbody').append($(widgetCode));
		}

		for (var key in btnMeta.hidden){
			$('form').append($(hiddenTemplate.replace('$label',key).replace('$value',btnMeta.hidden[key])));
		}
		title.value=btnMeta.name;
	});
</script>
</html>